<template>
	<u-mask :show="show">
		<view class="warp">
			<view class="rect" @tap.stop>
				<view class="nav-tit">
					<text>{{typeName}}</text>
					<view class="icon" @click="closeMask">
						<image src="../../static/recharge/close.png" style="width: 24rpx;height: 24rpx;" mode=""></image>
					</view>
				</view>
				<view class="content">

					<!-- 转换 -->
					<view v-if="type == 4" class="item" style="display: flex;    text-align: center;">
						<view>
							<view class="title">兑换数量</view>
							<input disabled :value="num_data.start_number" class="input" />
						</view>

						<view style="margin: 0 40rpx;">
							<view class="title">
								<image src="../../static/recharge/exchage.png" style="width: 30rpx;height: 30rpx;" mode="">
								</image>
							</view>
						</view>

						<view>
							<view class="title">到账数量</view>
							<input disabled :value="num_data.end_number" class="input" />
						</view>
					</view>

					<!-- 兑换充值 -->
					<view v-else class="item">
						<view class="title">{{typeTitle}}</view>
						<input :placeholder="'请输入'+ typeTitle" placeholder-class="placeholder" v-model="money"
							disabled="" class="input" type="number" />
					</view>

					<view class="item">
						<view class="title">支付密码</view>
						<input v-model="payPassword" placeholder="请输入您的支付密码" placeholder-class="placeholder"
							class="input" type="password" />
					</view>
					<view class="item code">
						<view class="title">手机号验证码</view>
						<input placeholder="请输入您的短信验证码" placeholder-class="placeholder" v-model="msgCode" class="input"
							type="number" />
						<view class="text" @tap="getCode">{{tips}}</view>
					</view>
					<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
					</u-verification-code>

					<view class="item u-m-t-50">
						<u-button @click="submit" shape="circle" type="primary">确定</u-button>
					</view>
				</view>
			</view>
		</view>
	</u-mask>
</template>

<script>
	export default {
		props: {
			id: {
				type: [Number, String],
				default: ""
			},
			type: {
				type: String,
				default: '1'
			},
			money: {
				type: [Number, String],
				default: 0
			},
			show: {
				type: Boolean,
				default: false
			},
			walletType: {
				type: String,
				default: ''
			},
			address: {
				type: String,
				default: ''
			},
			convertType: {
				type: [Number, String],
				default: 0
			},
			num_data: {
				type: Object,
				default: () => {}
			}
		},
		model: {
			prop: 'show',
			event: 'selectterm'
		},

		data() {
			return {
				msgCode: '',
				text: '获取验证码',
				tips: '',
				seconds: 60,
				payPassword: "",
				typeTitle: '支付金额'
			}
		},
		mounted() {
			console.log(this.id);
		},
		computed: {
			typeName: function(value) {
				switch (this.type) {
					case "1":
						return '出售'
					case "2":
						return '支付'
					case "3":
						this.typeTitle = '到账数量'
						return '提币'
					case "4":
						return '兑换'
					case "5":
						this.typeTitle = '互转数量'
						return '互转'
					default:
						break;
				}
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			closeMask() {
				this.$emit('selectterm', false)
			},
			getCode() {
				console.log('发送');
				if (this.$refs.uCode.canGetCode) {

					if (this.payPassword == "") {
						this.$u.toast('请输入支付密码')
						return false;
					}

					const that = this;
					uni.getStorage({
						key: 'user_data',
						success: function(user_data) {
							let data = user_data.data;
							// 模拟向后端请求验证码
							uni.showLoading({
								title: '正在获取验证码'
							})

							that.$u.api.getCode({
								phone: data.phone,
								type: 3,
								payPassword: that.payPassword
							}).then(res => {
								console.log(res);

								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								that.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								that.$refs.uCode.start();
							})
						}
					});
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {

			},
			start() {

			},
			submit() {
				const that = this;

				if (this.payPassword == "") {
					this.$u.toast('请输入支付密码')
					return false;
				}

				if (this.msgCode == "") {
					this.$u.toast('请输入验证码')
					return false;
				}

				let formData = {
					msgCode: this.msgCode,
					id: this.id
				}

				switch (that.type) {
					case "1": // 出售矿机
						this.$u.post('/api/voucher/saleVoucher',{
							voucherId:this.id,
							msgCode: this.msgCode
						},{
							'content-type': 'application/x-www-form-urlencoded'
						}).then(res=>{
							that.$emit('success', res)
							that.$emit('selectterm', false)
						})
					
						break;

					case "2": // 购买矿机
						that.$u.post('/api/miningMachine/buyMachine', formData, {
							'content-type': 'application/x-www-form-urlencoded'
						}).then(res => {
							that.$emit('success', res)
							that.$emit('selectterm', false)
							this.$u.toast('购买成功')
						})
						break;

					case "3": // 提币申请
						this.$u.post('/api/coin/apply', {
							walletType: this.walletType,
							walletNum: this.money,
							address: this.address,
							msgCode: this.msgCode
						}).then(res => {
							that.$emit('success', res)
							that.$emit('selectterm', false)
						})
						break;

					case "4": // 兑换
						this.$u.post('/api/coin/coinConvert',{
							convertType: this.convertType == 'USDT'? 0 : 1,
							walletNum: this.num_data.start_number,
							msgCode: this.msgCode
						}).then(res=>{
							that.$emit('success', res)
							that.$emit('selectterm', false)
						})
						break;
					case "5": // 互转
						this.$u.post('/api/coin/mutualConvert', {
							walletType: this.walletType,
							phone:this.address,
							walletNum: this.money,
							msgCode: this.msgCode
						}).then(res=>{
							that.$emit('success', res)
							that.$emit('selectterm', false)
						})
					default:
						break;
				}


			}
		}

	}
</script>

<style lang="scss" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 75%;
		border-radius: 20rpx;
		background-color: #fff;

		.nav-tit {
			padding: 28rpx 0;
			position: relative;
			text-align: center;
			border-bottom: 1px solid #F2F2F2;

			text {
				font-size: 30rpx;
				font-family: PingFangSC-Bold, PingFang SC;
				font-weight: bold;
				color: #1A1A1A;
			}

			.icon {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 24rpx;
			}
		}

		.content {
			padding: 0 40rpx;

			.item {
				padding-top: 40rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #F2F2F2;
			}

			.title {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1A1A1A;
			}

			.input {
				margin-top: 30rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Bold, PingFang SC;
				font-weight: bold;
				color: #1A1A1A;
			}

			.placeholder {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #B8B8B8;
			}

			.code {
				position: relative;

				.text {
					position: absolute;
					right: 7rpx;
					bottom: 20rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1D2088;
					line-height: 40rpx;
				}
			}
		}
	}
</style>
